<template>
  <div class="page">
    <m-header :title="langText&&langText.invitefriends" :canback="Boolean(1)"></m-header>
    <section class="body">
      <div class="bgc">
        <div class="bgc_1"></div>
        <div class="bgc_2"></div>
      </div>
      <div class="wrap">
        <div class="top">
          <div>
            <!-- <span style="color:#FF9F00">{{userInfo.username}}</span>  -->
          </div>
          <div class="gray">{{langText&&langText.sqrcoderegistration}}</div>
          <div class="img-box">
            <img class="img" :src="inviteSrc" alt />
          </div>
          
          <div class="yqm">{{langText&&langText.invitationcode}}： <span>{{userInfo&&userInfo.recommend_code}}</span> </div>
        </div>

        <div class="bot">
          <div class="bot_top">
            <!-- <p> {{langText&&langText.slogan}}</p> -->
            <p> {{langText&&langText.defi}}</p>
          </div>
          <div class="bot_bot">
            <div class="bot_bot_left">
              <img class="img" :src="api+app_ios_qrcode" alt />
              <p>{{langText&&langText.iosdownloadcode}}</p>
            </div>
            <div class="right">
              <img class="img" :src="api+app_android_qrcode" alt />
              <p> {{langText&&langText.androiddownloadcode}}</p>
            </div>
          </div>
        </div>
      </div>


    </section>
  </div>
</template>
<script>
import { Owner, Init,Base } from "@/server/server.js";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
import QRCode from "qrcode";
import { mapGetters } from "vuex";
export default {
  name: "invite",
  data() {
    return {
      allTxt:null,
      inviteSrc: null,
      inviteUrl: null,
      Invite: {},
      uidPay: null,
      langText:null,
      app_android_qrcode:null,
      app_ios_qrcode:null,
    };
  },
  created () {
  },
  mounted() {
    // console.log(this.userInfo)
    this.initData();
    this.setCode(this.inviteUrl);
    this.getDownload();
  },
  computed: {
    ...mapGetters(["uid", "userInfo", "api","lang",'getLangId'])
  },
  methods: {
    initData() {
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
      this.inviteUrl = this.api + "/dist/index.html#" + "/register?uid="+ this.userInfo.recommend_code;
    },
    getDownload(){
      Base.getDownload().then(res=>{
        if(res.code==1){
          this.app_android_qrcode = res.data.app_android_qrcode;
          this.app_ios_qrcode = res.data.app_ios_qrcode;
          console.log( this.app_ios_qrcode)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    setCode(url) {
      QRCode.toDataURL(url)
        .then(url => {
          this.inviteSrc = url;
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // .display-flex();
  // flex-direction: column;
  // justify-content: space-around;
  // align-items: center;
  text-align: center;
  // background-image: url(../../../assets/images/szxz/share-bg.png);
  // background-size: 100% 100%;
  color: #000;
  font-size: 30px;
  
  .bgc{
    width: 100%;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    .bgc_1{
      width: 100%;
      // position: absolute;
      background-color: #4EB6AD;
      height: 350px;
    }
    .bgc_2{
      width: 140%;
      background-color: #4EB6AD;
      border-radius: 100%;
      height: 200px;
      margin-left: -20%;;
      margin-top: -150px;
      // bottom: 0;
    }
  }
  p{ color: #333; }
  .wrap {
    // width: 100%;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    width: 710px;
    background-color: #fff;
    border-radius: 10px;
    margin: 104px 20px 30px;
    padding: 50px 30px;
    .top{
      padding-bottom: 30px;
      border-bottom: 1px solid #ddd;
      .title {
        font-size: 40px;
        color: @primary-color;
        margin-top: 5%;
      }
      .url {
        margin-bottom: 20px;
      }
      .img-box {
      }
      .yqm{
        font-size:34px;
        font-weight:400;
        color:rgba(51,51,51,1);
        >span{
          color: #4EB6AD;
        }
      }
      // @media screen and (max-height: 667px) {
      //   .img-box {
      //     position: absolute;
      //     bottom: 10%;
      //     left: 50%;
      //     .transform(translateX(-50%));
      //   }
      // }
    }
    .bot{
      padding: 30px;
      .bot_top{
        text-align: center;
        p{
          margin: 0 auto;
          width: 80%;
          font-size:28px;
          font-weight:400;
          color:rgba(102,102,102,1)
        }
      }
      .bot_bot{
        display: flex;
        justify-content: space-between;
        >div{
          flex: 1;
          margin-top: 20px;
        }
      }
    }
  }
  .gray{
    font-size:24px;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  img{
    width: 190px;
    height: 190px;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>
